<template>
  <div class="formTop-right">
    <h2>最近使用的搜索条件</h2>
    <div>
      <p v-for='(k,i) in searchCheckList' v-if='searchCheckList.length'>
        <el-checkbox v-model='searchCheckModel[i]' @change='handleSearchCheck(i)' class='check'></el-checkbox>
        <span @click='spanClick(i)' class='name' :class='{select:searchCheckModel[i]}' :title='k.conditionName'>{{k.conditionName}}</span>
        <i @click.stop='deleteClick(i)' class='el-icon-circle-cross' style='color:#CECECE'></i>
      </p>
    </div>
  </div>
</template>

<script>
export default {
	data () {
		return {
			searchCheckList: [],
			searchCheckModel: [],
		}
	},
	methods: {
		spanClick (i) {
      this.searchCheckModel.splice(i,1,!this.searchCheckModel[i])
			this.handleSearchCheck(i)
		},
		deleteClick (i) {
			this.visible2 = true
			this.searchCheckIndex = i
		},
	},
}
</script>

<style scoped lang='less'>
.formTop-right {
  position: absolute;
  right: 2%;
  top: 150px;
  width: 26%;
  border: 2px solid #bfcbd9;
  ::-webkit-scrollbar {
    width: 0px;
  }

  & > h2 {
    background-color: #f5f5f6;
    color: #959595;
    text-align: center;
    font-size: 15px;
    font-weight: normal;
    padding: 6px 0;
  }

  & > div {
    height: 160px;
    overflow-y: auto;
    overflow-x: hidden;

    p {
      padding: 8px 0 8px 12px;
      position: relative;

      .check span {
        transform: scale(0.92);
      }
      span.name.select {
        color: #38f;
      }
      span.name {
        cursor: pointer;
        position: relative;
        top: 4px;
        left: 6px;
        font-size: 13px;
        display: inline-block;
        max-width: 170px;
        word-break: keep-all; /* 不换行 */
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow: ellipsis;
      }
      i {
        position: absolute;
        right: 10px;
        margin-top: 6px;
        cursor: pointer;
        &:hover {
          transform: scale(1.2);
        }
      }
    }
  }
}
</style>